<template>
  <div class="app-container calendar-list-container">
    <el-row>
    <el-col :span="12" >
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入文件名称" v-model="listQuery.fileName"></el-input>
      <!-- <el-button class="filter-item" type="primary" style="float:right;"  icon="el-icon-edit"  @click="handleCreate">新增</el-button> -->
      <el-button class="filter-item" type="primary" style="float:right;margin-right:10px;" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="正在加载中" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" label="行号" width="50">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="文件名称">
        <template slot-scope="scope">
          <span>{{scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="发布时间">
        <template slot-scope="scope">
          <span>{{scope.row.gmtCreate | formatDatetime}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="60px" label="版本号">
        <template slot-scope="scope">
          <span class="link-type" >{{scope.row.versionName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="描述">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80" class-name="small-padding fixed-width">
        <template slot-scope="scope">
         <el-button type="success" size="mini" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    
    </el-col>
    <el-col :span="12" style='margin-top:30px;'>
      <el-table :key='tableKey' :data="listdetail" v-loading="listLoadingdetail" element-loading-text="正在加载中" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" label="行号" width="65">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="终端序列号">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentSyn }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" label="状态">
        <template slot-scope="scope">
          <span class="link-type" >{{scope.row.status | showStatusOption}}</span>
        </template>
      </el-table-column>
    </el-table>

    </el-col>
    </el-row>
     
  </div>
</template>

<script>
import { getVersionPublishPageList, saveVersionPublish, updateVersionPublish, getVersionPublishDetail, deleteVersionPublish, getVersionPublishDetailList } from '@/api/itims/versionpublish'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime, formatDate, formatDatetime  } from '@/utils'

export default {
  name: 'versionpublish',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listdetail: [],
      listLoadingdetail: true,
      versionPublishId: undefined,
      listQuery: {
        fileName: undefined,
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }
      
      

    }
  },
  filters: {
    formatDate(time) {
       var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    },
    formatDatetime(time){
      return formatDatetime(time);
    },
    showStatusOption(key){
      const statusMap = {
        0: '已发布',
        1: '已接收',
        2: '已',
        3: '已接收'
      }
      return statusMap[key]
    }

  },
  created() {
    this.getList()
    this.listdetail = []
    this.listLoadingdetail = false
  },
  methods: {
    getList() {
      this.listLoading = true
      const param = {
        'body': {
          "versionPublishDTO":{
            "fileName":this.listQuery.fileName
          },
          "pageInfo":{
            "page":this.listQuery.page,
            "pageSize":this.listQuery.limit
          }
        }
      }
      getVersionPublishPageList(param).then(response => {
        this.list = response.body.versionPublishDTOList
        this.total = response.body.pageInfo.rowCount
        this.listLoading = false
      })
    },
    getListDetail() {
      this.listLoadingdetail = true
      const param = {
        'body': {
          "versionPublishDetailDTO":{
            "versionPublishId":this.versionPublishId
          }
        }
      }
      getVersionPublishDetailList(param).then(response => {
        this.listdetail = response.body.versionPublishDetailDTOList
        this.listLoadingdetail = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleDetail(row) {   
        this.versionPublishId = row.id
        this.getListDetail()
    }
  }
}
</script>
